<template>
  <div>
    <h2>BABA有存款: {{money}}</h2>
    <button @click="borrowMoneyFromXM(100)">找小明借钱100</button><br>
    <button @click="borrowMoneyFromXH(150)">找小红借钱150</button><br>
    <button @click="borrowMoneyFromAll(200)">找所有孩子借钱200</button><br>
    
    <br>
    <Son ref="son"/>

    <br>
    <Daughter  ref='dau'/>
  </div>
</template>

<script>
import Son from './Son'
import Daughter from './Daughter'

export default {
  name: 'ChildrenParentTest',
  data () {
    return {
      money: 1000
    }
  },

  methods: {
      borrowMoneyFromXM(money){
         this.money += money
         //this.$refs.son 获取到子组件对象
         //获取到子组件对象之后，就可以操作子组件内部的所有的数据和方法
         this.$refs.son.money -= money
      },

      borrowMoneyFromXH(money){
          this.money += money

          this.$refs.dau.money -= money
      },

      borrowMoneyFromAll(money){
         this.money += money * 2

        //this.$children  拿的是所有子组件对象组成的数组
        //这个东西禁用，因为我们拿到的数组里面的顺序不确定
         this.$children.forEach(item=>item.money -= money)

      }
  },

  components: {
    Son,
    Daughter
  }
}
</script>

<style>

</style>
